<template>
  <div class="container">
    <n-carousel show-arrow autoplay style="border-radius: 5px;">
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
      >
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
      >
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
      >
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
      >
        
      <template #dots="{ total, currentIndex, to }">
        <ul class="custom-dots">
          <li
            v-for="index of total"
            :key="index"
            :class="{ ['is-active']: currentIndex === index - 1 }"
            @click="to(index - 1)"
          />
        </ul>
      </template>
    </n-carousel>
    <div class="long-tag mt10 flex at-center">
        <svgIcon className="notcie-icon-style" iconName="icon-speaker"></svgIcon>
        <noticeBar style="flex:1;margin-left: 10px;" :noticeList="noticeList"></noticeBar>
    </div>

    <div class="main" >
        <div style="width: 18%;position: sticky; margin-right: 10px;">
            <n-card class="card car-tag">
                <ul style="width: 100%;">
                    <li class="flex at-center"><h4 style="text-align: center;width: 100%;font-weight: normal;" @click="getFilterArticle(0)">全 部</h4></li>
                    <li v-for="(item,index) in tagsList" :key="index" class="flex at-center" style="" @click="getFilterArticle(item.id)">
                        <img style="width: 30px;height: 30px; margin-right: 10px;" :src="item.tag_img" alt="">
                        <h4>{{ item.tag_name }}</h4>
                    </li>
                </ul>
            </n-card>
        </div>
        <div style="flex:1">
            <n-card class="card">
                <ul>
                    <li v-for="(item,index) in filterArticleList" :key="index" class="article_li" style="padding: 5px;border-bottom: 1px solid #f2f2f2;" @click="viewDeatil(item.id)">
                        <div class="flex at-center">
                            <div style="padding: 0 5px;">{{ users.length && toUserName(item.authorId) }}</div>
                            <div style="padding: 0 5px;border-left: 1px solid #f2f2f2;border-right: 1px solid #f2f2f2;">{{ item.audit_time }}</div>
                            <div style="padding: 0 5px; font-size: 12px;color: #ccc;">{{ tagsList && toTagNames(item.tags)  }}</div>
                        </div>
                        <h2 class="mt10">{{ item.title }}</h2>
                        <!-- <p class="mt10" style="color: #8a919f;" v-html="item.content.substring(0,20)"></p> -->
                        <div class="flex mt10">
                            <div style="margin-right: 10px;"><SvgIcon iconName="icon-dianzan"></SvgIcon ><span style="margin-left: 5px;">{{ item.like_count }}</span></div>
                            <div style="margin-right: 10px;"><SvgIcon iconName="icon-liulan"></SvgIcon ><span style="margin-left: 5px;">{{ item.view_count }}</span></div>
                            <div style="margin-right: 10px;"><SvgIcon iconName="icon-lvsefenkaicankaoxianban-"></SvgIcon ><span style="margin-left: 5px;">{{ item.collect_count }}</span></div>
                        </div>
                    </li>
                </ul>
            </n-card>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import requestList from '@/service/request';
import { onMounted, ref } from 'vue';





const tagsList = ref<any[]>([])
const getTagList = async ()=>{
    const res = await requestList.tagListApi({all:true})
    if(res.code === 1){
        tagsList.value = (res.data as any)
    }
}

let allArticleList:any[] = []
const filterArticleList = ref<any[]>([])
const getArticleList = async ()=>{
    const res = await requestList.articleListApi({all:true})
    if(res.code === 1){
        allArticleList = (res.data as any)
        getFilterArticle(0)
    }
}
// 过滤文章
const getFilterArticle = (id:number) =>{
    const articles:any[] = JSON.parse(JSON.stringify(allArticleList))
    if(id!==0){
        filterArticleList.value =  articles.filter((item:any)=>{
            const tagIds = item.tags.split(',').map((item:any)=>(Number(item)))
            return tagIds.includes(id)
        })
    }else{
        filterArticleList.value = articles
    }
}

// 用戶列表
const users = ref([])
const getUsers = async () => {
    const res = await requestList.userListApi({all:true})
    if(res.code === 1){
        users.value = (res.data as any)
    }
}

const  toUserName = (id:number) => {
    const target = users.value.find((item:any)=>(item.id===id))
    const name = target?(target as any).username:''
    return name
}

const  toTagNames = (ids:string) :string => {
    let target:string = ''
    const idsArr = ids.split(',')
    const targetNamesArr:string[] = []
    idsArr.forEach((id:any)=>{
        tagsList.value.forEach((item:any)=>{
            if(id == item.id){
                targetNamesArr.push(item.tag_name)
            }
        })
    })
    console.log(targetNamesArr);
    target = targetNamesArr.join(',')    
    return target
}


const viewDeatil = (index:number) => {
    router.push({
        name:'articleDetails',
        query:{id:index}
    })
}

const noticeList = ref([])
const getNotice = async ()=>{
    const res = await requestList.getNoticeMsgApi({all:true})
    if(res.code === 1){
        noticeList.value = res.data as any
    }
}

onMounted(()=>{
    getTagList()
    getArticleList()
    getUsers()
    getNotice()
})

</script>

<style lang="scss" scoped>
.carousel-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.custom-arrow {
  display: flex;
  position: absolute;
  bottom: 25px;
  right: 10px;
}


.custom-dots {
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.custom-dots li {
  display: inline-block;
  width: 12px;
  height: 4px;
  margin: 0 3px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  width: 40px;
  background: #fff;
}

.main{
    margin-top: 10px;
    width: 100%;
    justify-content: space-between;
    display: flex;
    .card{
        border-radius: 5px;
        .level-h1{
            padding: 5px 0;
            border-bottom: 2px solid $color3;
        }
        .level-icon{
            width: 20px;
            height: 20px;
        }
        .level-title{
            font-size: 20px;
            margin-left: 10px;
            font-weight: 600;
        }
        .level-li{
            padding: 5px 0;
            &-index{
                font-size: 18px;
            }
            &-title{
                margin-left: 5px;
                font-size: 15px;
            }
        }
    }
    .car-tag{
        ul li{
            padding: 10px;border-bottom: 1px solid #f2f2f2;cursor: pointer;
            transition: all .3s;
            &:hover{
                background: $color3;
            }
        }
    }
    
}
.article_li{
    cursor: pointer;
    transition: all .5s;
    &:hover{
        background: #f6f6f6;
    }
}
.long-tag{
    background: $color3;
    border: 2px solid;
    border-radius: 8px;
    padding: 5px 10px;
    height: 30px;
    font-size: 16px;
    color: #000;
}
.notcie-icon-style{
    font-size: 22px;
    color: #fff;
}



</style>